<template>
  <div class="app-container">
    <div @click="btn1">文本</div>
    <div @click="btn2">图片</div>
    <div @click="btn3">语音</div>
    <div @click="btn4">视频</div>
    <div @click="btn5">图文</div>
    <WxReplySelect :obj-data="tempObj" @updateMenu="updateMenu" />
  </div>
</template>

<script>
import WxReplySelect from '@/components/wechat-mp/reply'

export default {
  components: {
    WxReplySelect
  },
  data() {
    return {
      hackResetWxReplySelect: false, // 销毁组件
      tempObj: {
        'sourceType': 'TEXT',
        'unionKey': '我是文本',
        'mpSourceNewsPageVos': [],
        'appId': '6726490876347943787',
        'repUrl': '',
        'repName': ''
      }
    }
  },
  mounted() {
    this.$set(this.tempObj, 'sourceType', 'TEXT')
    this.hackResetWxReplySelect = false // 销毁组件
    this.$nextTick(() => {
      this.hackResetWxReplySelect = true// 重建组件
    })
  },
  methods: {
    updateMenu(val) {
      console.log(val)
    },
    btn1() {
      this.hackResetWxReplySelect = false // 销毁组件
      this.$nextTick(() => {
        this.hackResetWxReplySelect = true// 重建组件
      })
      this.tempObj = {
        'sourceType': 'TEXT',
        'unionKey': '我是文本',
        'mpSourceNewsPageVos': [],
        'appId': '6726490876347943787',
        'repUrl': '',
        'repName': ''
      }
    },
    btn2() {
      this.hackResetWxReplySelect = false // 销毁组件
      this.$nextTick(() => {
        this.hackResetWxReplySelect = true// 重建组件
      })
      this.tempObj = {
        'sourceType': 'PIC',
        'unionKey': '6726490876347944158',
        'mpSourceNewsPageVos': [],
        'appId': '6726490876347943787',
        'repUrl': 'http://file-sit.ibeeking.com/2021/02/02/user-header_1612249349245.png',
        'repName': '1612249349245.png'
      }
    },
    btn3() {
      this.hackResetWxReplySelect = false // 销毁组件
      this.$nextTick(() => {
        this.hackResetWxReplySelect = true// 重建组件
      })
      this.tempObj = {
        'sourceType': 'VOICE',
        'unionKey': '6726490876347944159',
        'mpSourceNewsPageVos': [],
        'appId': '6726490876347943787',
        'repUrl': 'http://file-sit.ibeeking.com/2021/02/02/1_1612250275563.mp3',
        'repName': '1612250275563.mp3'
      }
    },
    btn4() {
      this.hackResetWxReplySelect = false // 销毁组件
      this.$nextTick(() => {
        this.hackResetWxReplySelect = true// 重建组件
      })
      this.tempObj = {
        'sourceType': 'VIDEO',
        'unionKey': '6726490876347944163',
        'mpSourceNewsPageVos': [],
        'appId': '6726490876347943787',
        'repUrl': 'http://file-sit.ibeeking.com/2021/01/19/0bb20e4370cc06bbe7ba4a1ab02833b6_1611039188789.mp4',
        'repName': '1611039188789.mp4'
      }
    },
    btn5() {
      this.hackResetWxReplySelect = false // 销毁组件
      this.$nextTick(() => {
        this.hackResetWxReplySelect = true// 重建组件
      })
      this.tempObj = {
        'sourceType': 'IMAGE_TEXT',
        'unionKey': '6726490876347944218',
        'mpSourceNewsPageVos': [
          { 'id': '6726490876347944219', 'resourceId': '6726490876347944218', 'title': '第一个图文标题', 'mediaId': null, 'thumbMediaId': 6726490876347944000, 'thumbMediaUrl': 'http://file-sit.ibeeking.com/2021/02/02/user-header_1612249349245.png', 'author': '我是作者', 'digest': '我是摘要', 'showCoverPic': 1, 'contentSourceUrl': 'http://www.baidu.com', 'needOpenComment': 0, 'onlyFansCanComment': 0 }
        ],
        'appId': '6726490876347943787',
        'repUrl': 'http://file-sit.ibeeking.com/',
        'repName': ''
      }
    }
  }
}
</script>

<style lang='scss'>
</style>
